<template>
  <Form ref="formInline" :model="formInline" :rules="ruleInline">
    <FormItem prop="user">
      <Input type="text" v-model="formInline.user" placeholder="账号">
        <Icon type="ios-person-outline" slot="prepend"></Icon>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="formInline.password" placeholder="密码">
        <Icon type="ios-lock-outline" slot="prepend"></Icon>
      </Input>
    </FormItem>
    <FormItem>
      <CheckboxGroup v-model="formInline.checkbox">
        <Checkbox
          label="记住密码"
          class="remember-passw-button"
          v-model="formInline.remPassword"
        ></Checkbox>
        <Checkbox
          label="七天免登"
          class="auto-login-button"
          v-model="formInline.autoLogin"
        ></Checkbox>
      </CheckboxGroup>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formInline')">登陆</Button>
    </FormItem>
    <div class="to-others">
      <div class="to-forget">
        <span @click="toForget">找回密码</span>
      </div>
      <div class="to-regist">
        <span>没有账号？</span>
        <span class="to-regist-button" @click="toRegist">点击注册</span>
      </div>
    </div>
  </Form>
</template>

<script>
import { getCookie, setCookie, delCookie } from "@/common/utils";
import axios from "@/util/axios";
export default {
  name: "Login",
  data() {
    return {
      formInline: {
        user: "",
        password: "",
        checkbox: ["记住密码", "七天免登"],
        remPassword: true,
        autoLogin: true,
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "请输入用户名或者邮箱",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          // {
          //   type: "string",
          //   min: 6,
          //   message: "密码不少于6位",
          //   trigger: "blur",
          // },
        ],
      },
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          //发送请求
          this.sendLoginAjax(
            {
              username: this.formInline.user,
              password: this.formInline.password,
            },
            (res) => {
              console.log(res);
              if (res.code === "1") {
                //登陆成功
                //记录用户的id和token
                localStorage.setItem("userId", res.data.token);
                //改变登陆状态
                sessionStorage.setItem("isLogin", true);
                //发布成功消息
                this.$Message.success("Success!");
                //存储token
                this.$store.commit("changeLogin", res.data.token);
                //1s后跳转至主页面
                setTimeout(() => {
                  this.$router.push({
                    path: "/home/main",
                  });
                }, 1000);
              } else {
                this.$Message.error(res.message);
              }
            }
          );
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    toRegist() {
      this.$emit("toRegist");
    },
    toForget() {
      this.$emit("toForget")
    },
    remUserInfo() {
      setCookie("username", this.formInline.user, 7);
      setCookie("password", this.formInline.password, 7);
    },
    sendLoginAjax(payload, callback) {
      axios
        .post("user/login", {
          data: {
            username: payload.username,
            password: payload.password,
          },
        })
        .then((res) => {
          callback(res);
        });
    },
  },
  beforeCreate() {
    if (localStorage.getItem("Authorization")) {
      this.$router.push({
        path: "/home/main",
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.ivu-btn-primary {
  width: 100%;
  height: 4rem;
  line-height: 4rem;
  margin-top: 2rem;
  font-size: 1.8rem;
}
form {
  margin-top: 5rem;
}
.ivu-checkbox-group {
  position: relative;
  .remember-passw-button {
    position: absolute;
    left: 0;
  }
  .auto-login-button {
    position: absolute;
    right: 0;
  }
}
.to-others {
  display: flex;
  width: 100%;
  font-size: 1.5rem;
  justify-content: space-between;
  .to-forget {
    cursor: pointer;
    color: rgb(45, 140, 240);
  }
  .to-regist {
    .to-regist-button {
      cursor: pointer;
      color: rgb(45, 140, 240);
    }
  }
}
</style>
